.zoetrope{

  .swiper-container {
    width: 100%;
    position: relative;

    .slide-counter {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 14px;
      z-index: 18;
    }

    .card-swiper {
      width: 100%;

      .swiper-item {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }

      image {
        width: 100%;
        height: 100%;
      }

    }


    /* 轮播指示点 start*/customizeBnt
                         .carouselDrop {
      z-index: 1;
      width: 100%;
      height: 36rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin: 20rpx 0;

      .spot {
        background-color: rgb(122, 109, 230);
        opacity: 0.5;
        width: 10rpx;
        height: 10rpx;
        border-radius: 20rpx;
        margin: 0 8rpx;
      }

      .spot.active {
        opacity: 1;
        background-color: rgb(122, 109, 230);
      }
    }
  }
  .zoetropeButton{
    width: 100%;
    position: absolute;
    bottom: 34rpx;
    z-index: 5;
    left: 0;
    .customizeBnt{
      margin: 20rpx auto;
      border-radius: 50rpx;
      width: 90%;
      height: 78rpx;
      border: 2px solid #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .text{
        width: 80%;
        height: 78rpx;
        line-height: 78rpx;
        border-radius: 50rpx;
        text-align: center;
        border: 2px solid #ffffff;
        border-left: none;
        font-size: 32rpx;
        font-weight: 400;
        color: #ffffff;

      }
      .customizeIcon{
        width: 20%;
        .jiantoushoubingjiantou{
          color: #ffffff;
          font-size: 60rpx;
        }
      }
    }
    .zoetropeBox{
      margin: 30rpx auto;
      width: 90%;
      height: 94rpx;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      justify-content: space-between;
      .bntLeft{
        width: 40%;
        height: 94rpx;
        line-height: 94rpx;
        border-radius: 50rpx;
        background: #ffffff;
        color: #AD51E8;
      }
      .bntRight{
        width: 55%;
        height: 94rpx;
        line-height: 94rpx;
        border-radius: 50rpx;
        background: linear-gradient(135deg, #C98DEE, #AD51E8);
        color: #ffffff;
      }
    }
  }
}